<template>
    <ul class="footer-nav">
        <li v-for="nav, index in navData.list" class="item" @click="navClick(index)">
            <router-link :to="nav.route" class="item-nav">
                <span :class="['icon', active == index ? nav.aciveIcon : nav.deficon]"></span>
                <span :class="['text', active == index ? 'text-a' : '']">{{ nav.text }}</span>
            </router-link>
        </li>
    </ul>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue';
import { useStore } from '../store';
const store = useStore()
const active = ref(store.getters.getCount);
const navData = reactive({
    list: [
        {
            text: '首页',
            route: '/',
            deficon: 'home',
            aciveIcon: 'home-a'
        },
        {
            text: '个人中心',
            route: '/self',
            deficon: 'self',
            aciveIcon: 'self-a'
        },
    ]
});
const navClick = (index: number) => {
    active.value = index;
    store.dispatch('increment', index);
    active.value = store.getters.getCount;
    console.log(store.getters.getCount)
}
</script>
<style lang="less" >
.footer-nav {
    width: 100%;
    height: 69px;
    background: #ffffff;
    box-shadow: inset 0px 1px 0px 0px #e7e7e7;
    position: fixed;
    bottom: -2px;
    left: 0;
    display: flex;
    .item {
        width: 50%;
        height: 69px;
        background: #ffffff;
        display: block;
        .item-nav {
            height: 69px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            background: #ffffff;
            .icon {
                height: 24px;
                width: 24px;
            }

            .text {
                height: 16px;
                font-size: 10px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #9e9e9e;
                line-height: 16px;
            }

            .text-a {
                color: #df3030;
                // font-weight: 700;
            }

            .home {
                background: url("@/assets/img/home.png") no-repeat center;
                background-size: contain;
            }

            .home-a {
                background: url("@/assets/img/home-a.png") no-repeat center;
                background-size: contain;
            }

            .self {
                background: url("@/assets/img/self.png") no-repeat center;
                background-size: contain;
            }

            .self-a {
                background: url("@/assets/img/self-a.png") no-repeat center;
                background-size: contain;
            }
        }
    }
}
</style>